/*inputSkin*/

.inputSkin {
	display: inline-block;
	position: relative;
}

.inputSkin>input[type="checkbox"],
.inputSkin>input[type="radio"] {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	display: block;
	margin: 0;
	z-index: 1;
}

.inputSkin>input[type="checkbox"]+label,
.inputSkin>input[type="radio"]+label {
	z-index: 0;
	display: inline-block;
	position: relative;
	/*transition: color .3s;*/
}

.inputSkin>input[type="checkbox"]:disabled+label,
.inputSkin>input[type="radio"]:disabled+label {
	opacity: .3;
}


/*.skin1*/

.inputSkin.skin1>input[type="checkbox"]+label,
.inputSkin.skin1>input[type="radio"]+label {
	padding-left: 1.5em;
}

.inputSkin.skin1>input[type="checkbox"]+label:before,
.inputSkin.skin1>input[type="radio"]+label:before {
	position: absolute;
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	top: 50%;
	left: .5em;
	border: .1em solid #999;
	transform: translateY(-50%)translateX(-50%);
}

.inputSkin.skin1>input[type="radio"]+label:before {
	border-radius: 50%;
}

.inputSkin.skin1>input[type="radio"]+label:after {
	position: absolute;
	content: '';
	display: block;
	width: .5em;
	height: .5em;
	top: 50%;
	left: .5em;
	opacity: 0;
	background-color: black;
	border-radius: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.inputSkin.skin1>input[type="checkbox"]+label:after {
	position: absolute;
	content: '';
	display: block;
	width: 1em;
	height: .5em;
	top: 0;
	left: 0;
	border: .1em solid black;
	border-width: 0 0 .2em .2em;
	transform-origin: top left;
	transform: translateY(.5em) rotateZ(-45deg);
	opacity: 0;
}

.inputSkin.skin1>input[type="checkbox"]:hover:not(:disabled):not(:checked)+label:after,
.inputSkin.skin1>input[type="radio"]:hover:not(:disabled):not(:checked)+label:after {
	opacity: .3;
}

.inputSkin.skin1>input[type="checkbox"]:checked+label,
.inputSkin.skin1>input[type="radio"]:checked+label {
	color: black;
}

.inputSkin.skin1>input[type="checkbox"]:checked+label:after,
.inputSkin.skin1>input[type="radio"]:checked+label:after {
	opacity: 1;
}


/*.skin1.yellow*/

.inputSkin.skin1.yellow>input[type="radio"]+label:after {
	background-color: yellow;
}

.inputSkin.skin1.yellow>input[type="checkbox"]+label:after {
	border-color: yellow;
}

.inputSkin.skin1.yellow>input[type="checkbox"]:checked+label,
.inputSkin.skin1.yellow>input[type="radio"]:checked+label {
	color: yellow;
}


/*.skin1.red*/

.inputSkin.skin1.red>input[type="radio"]+label:after {
	background-color: red;
}

.inputSkin.skin1.red>input[type="checkbox"]+label:after {
	border-color: red;
}

.inputSkin.skin1.red>input[type="checkbox"]:checked+label,
.inputSkin.skin1.red>input[type="radio"]:checked+label {
	color: red;
}


/*.skin1.blue*/

.inputSkin.skin1.blue>input[type="radio"]+label:after {
	background-color: blue;
}

.inputSkin.skin1.blue>input[type="checkbox"]+label:after {
	border-color: blue;
}

.inputSkin.skin1.blue>input[type="checkbox"]:checked+label,
.inputSkin.skin1.blue>input[type="radio"]:checked+label {
	color: blue;
}


/*.skin1.F5B617*/

.inputSkin.skin1.F5B617>input[type="radio"]+label:after {
	background-color: #F5B617;
}

.inputSkin.skin1.F5B617>input[type="checkbox"]+label:after {
	border-color: #F5B617;
}

.inputSkin.skin1.F5B617>input[type="checkbox"]:checked+label,
.inputSkin.skin1.F5B617>input[type="radio"]:checked+label {
	color: #F5B617;
}


/*skin2*/

.inputSkin.skin2>input[type="checkbox"]+label,
.inputSkin.skin2>input[type="radio"]+label {
	border: 1px solid #999;
	padding: 0 1em;
	overflow: hidden;
}

.inputSkin.skin2>input[type="checkbox"]:checked+label,
.inputSkin.skin2>input[type="radio"]:checked+label {
	border-color: black;
	color: black;
	background-color: rgba(0, 0, 0, .2);
}

.inputSkin.skin2>input[type="checkbox"]+label:before,
.inputSkin.skin2>input[type="radio"]+label:before {
	position: absolute;
	content: '';
	display: block;
	width: 2em;
	height: 2em;
	background-color: black;
	right: -1em;
	bottom: -1em;
	transform: rotateZ(45deg);
	opacity: 0;
}

.inputSkin.skin2>input[type="checkbox"]+label:after,
.inputSkin.skin2>input[type="radio"]+label:after {
	position: absolute;
	content: '';
	display: block;
	width: .5em;
	height: .2em;
	border: .1em solid #fff;
	border-width: 0 0 .2em .2em;
	transform: rotateZ(-45deg);
	transition: opacity .5s;
	right: .1em;
	bottom: .3em;
	opacity: 0;
}

.inputSkin.skin2>input[type="checkbox"]:hover:not(:disabled):not(:checked)+label:before,
.inputSkin.skin2>input[type="radio"]:hover:not(:disabled):not(:checked)+label:before,
.inputSkin.skin2>input[type="checkbox"]:hover:not(:disabled):not(:checked)+label:after,
.inputSkin.skin2>input[type="radio"]:hover:not(:disabled):not(:checked)+label:after {
	opacity: .3;
}

.inputSkin.skin2>input[type="checkbox"]:checked+label:before,
.inputSkin.skin2>input[type="radio"]:checked+label:before,
.inputSkin.skin2>input[type="checkbox"]:checked+label:after,
.inputSkin.skin2>input[type="radio"]:checked+label:after {
	opacity: 1;
}


/*skin2.red*/

.inputSkin.skin2.red>input[type="checkbox"]:checked+label,
.inputSkin.skin2.red>input[type="radio"]:checked+label {
	border-color: red;
	color: red;
	background-color: rgba(255, 0, 0, .2);
}

.inputSkin.skin2.red>input[type="checkbox"]+label:before,
.inputSkin.skin2.red>input[type="radio"]+label:before {
	background-color: red;
}


/*skin2.yellow*/

.inputSkin.skin2.yellow>input[type="checkbox"]:checked+label,
.inputSkin.skin2.yellow>input[type="radio"]:checked+label {
	border-color: yellow;
	color: yellow;
	background-color: rgba(255, 255, 0, .2);
}

.inputSkin.skin2.yellow>input[type="checkbox"]+label:before,
.inputSkin.skin2.yellow>input[type="radio"]+label:before {
	background-color: yellow;
}


/*skin2.blue*/

.inputSkin.skin2.blue>input[type="checkbox"]:checked+label,
.inputSkin.skin2.blue>input[type="radio"]:checked+label {
	border-color: blue;
	color: blue;
	background-color: rgba(0, 0, 255, .2);
}

.inputSkin.skin2.blue>input[type="checkbox"]+label:before,
.inputSkin.skin2.blue>input[type="radio"]+label:before {
	background-color: blue;
}


/*F5B617*/

.inputSkin.skin2.F5B617>input[type="checkbox"]:checked+label,
.inputSkin.skin2.F5B617>input[type="radio"]:checked+label {
	border-color: #F5B617;
	color: #F5B617;
	background-color: rgba(245, 182, 23, .2);
}

.inputSkin.skin2.F5B617>input[type="checkbox"]+label:before,
.inputSkin.skin2.F5B617>input[type="radio"]+label:before {
	background-color: #F5B617;
}